import React, { useEffect, useState } from 'react'
import { Form, Button, Popconfirm, Modal, DatePicker, Row, Col,Input } from 'antd'
import { connect } from 'umi'
import moment from 'moment'

const FormItem = Form.Item

const formLayout = {
  labelCol: { span: 7 },
}

const CreateForm = (props) => {
  const { onSubmit, onCancel,record, visible,loading } = props;
  const [form] = Form.useForm()

  const onFormCancel = () => {
    form.resetFields()
    onCancel()
  };

  useEffect(() => {
    if(record){
      let etm = moment(record.endExpeditionDate);
      form.setFieldsValue({...record,beginExpeditionDate:moment(record.beginExpeditionDate),
        expeditionDays:etm.diff(moment(), 'days')
      });
    }
  }, [visible]);

  const handleSubmit = async () => {
    const fieldsValue = await form.validateFields()
    form.resetFields();
    onSubmit({
      promotionId:record.promotionId,
      expeditionStatus:record.expeditionStatus,
      beginExpeditionDate:moment(fieldsValue.beginExpeditionDate).format('YYYY-MM-DD hh:mm:ss'),
      expeditionDays:fieldsValue.expeditionDays
    })
  }

  const renderContent = () => {
    return (
      <>
        <Row gutter={24} justify={'center'}>
          <Col span={12}>
            <FormItem name="beginExpeditionDate" label="考察开始日期">
              <DatePicker disabled={true} style={{ width: '100%' }}/>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem name="expeditionDays" label="倒计时考察期天数" rules={[{required: true, message: '倒计时考察期天数不能为空'}]}>
              <Input type={"number"} placeholder="请输入倒计时考察期天数" suffix="天"/>
            </FormItem>
          </Col>
        </Row>
      </>
    )
  }

  const renderFooter = () => {
    return (
      <>
        <Button onClick={() => onFormCancel()}>取消</Button>
        <Popconfirm title={`是否保存修改后的转正日期?`}
                    onConfirm={handleSubmit}
                    okText="是"
                    cancelText="否">
          <Button type="primary" loading={loading}>提交</Button>
        </Popconfirm>
      </>
    )
  }

  return (
    <Modal
      width={1024}
      destroyOnClose
      title="更新转正日期"
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      onClose={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Form
        {...formLayout}
        form={form}
        style={{ paddingTop: '24px' }}
      >
        {renderContent()}
      </Form>
    </Modal>
  )
}


export default connect(() => ({
}))(CreateForm)
